<template>
  <q-layout view="hHh lpR fFf" class="bg-white">
    <q-header bordered class="text-white q-py-none row header" style="">
      <q-toolbar class="q-py-none q-px-md">
        <q-btn flat @click="drawer = !drawer" round dense icon="menu"/>
        <q-toolbar-title style="width:100px" class="q-ml-sm q-pa-none">
          <!-- <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar> -->
          51提效
        </q-toolbar-title>
        <q-space/>
        <!-- TODO: 全局搜索 -->
        <!-- <q-input outlined dense v-model="keywords" hidden
                 label="全站搜索"
                 @keydown.enter="handleSearch">
          <template v-slot:prepend>
            <q-btn round dense flat icon="search" class="q-mr-sm" @click="handleSearch"/>
          </template>
        </q-input> -->

        <q-tabs class="q-mx-xl" v-model="tab">
          <q-route-tab to="/km" name="km" label="知识库"/>
          <q-route-tab to="/apps" name="apps" label="应用搜集"/>
          <!-- <q-tab name="english" label="英语学习" /> -->
          <q-route-tab to="/main" name="workbench" label="个性工作台"/>
        </q-tabs>
        <q-icon class="cursor-pointer" name="notifications" size="sm"></q-icon>

        <q-btn dense flat no-wrap v-if="$store.state.userInfo.role !== 99" to="/main">
          <q-avatar class="q-ml-xl" size="32px">
            <img src="https://cdn.quasar.dev/img/boy-avatar.png" alt="">
          </q-avatar>
          <!-- <q-icon name="arrow_drop_down" size="16px" /> -->

          <q-menu auto-close>
            <q-list dense flat>
              <!-- <q-item clickable class="">
                <q-item-section>设置</q-item-section>
              </q-item> -->
              <!-- TODO: 切换用户 -->
              <!-- <q-item clickable class=""  @click="logout">
                <q-item-section>退出</q-item-section>
              </q-item> -->
              <!-- <q-btn class="cursor-pointer q-mt-xl" v-if="this.$store.state.userInfo.role !== 99"
               size="sm" v-close-popup label="退出登录"
               @click="logout"></q-btn> -->
            </q-list>
          </q-menu>
        </q-btn>

        <!-- <q-btn dense flat round icon="menu" @click="right = !right" /> -->

      </q-toolbar>

    </q-header>

    <q-drawer
        v-model="drawer"
        :width="200"
        :breakpoint="500"
        overlay
        bordered
        persistent
        content-class="menu"
    >
      <slot name="left-drawer"></slot>
    </q-drawer>

    <q-page-container class="container">
      <div class="q-pa-none q-ma-none row">
        <div class="col-2" :breakpoint="600"></div>
        <div class="col-6 q-my-sm  shadow">
          <!-- <keep-alive>
          <router-view></router-view>
          </keep-alive> -->
          <slot name="page"></slot>
        </div>
        <div class="col-2 q-ml-md">
          <div class="bg-white q-my-sm shadow-1" v-if="adsShow" style="height:200px">ADS here</div>
          <div class="bg-white q-my-sm shadow" style="">
            <slot name="topics"></slot>
          </div>

          <!-- <div class="bg-white q-my-sm" style="height:200px">TRENDING STORIES</div> -->
          <!-- <div class="bg-white q-my-sm" style="height:200px">TRENDING PRODUCTS</div> -->
          <div class="q-mt-md footer">
            <a
                target="_blank"
                href="https://beian.miit.gov.cn"
                class="icp"
            >京ICP备2021027747号</a>
            <div>Beta版本 · 51提效</div>
          </div>
        </div>
        <div class="col-2"></div>
      </div>
    </q-page-container>

  </q-layout>
</template>

<script lang="ts">
// import iUser from "../api/user";
export default ({
  name: 'AppsLayout',
  data () {
    return {
      adsShow: false,
      keywords: '',
      drawer: false,
      tab: 'apps'
    }
  },
  props: {
    leftDrawer: Boolean
  },
  methods: {
    // async logout() {
    //   await iUser.logout()
    //   await this.$store.dispatch('initUserInfo')
    //   await this.$router.push({name: 'Login'})
    // },
    handleSearch () {
      console.log()
    }
  }
})
</script>

<style lang="scss">

.header {
  height: 50px;
  background-color: $c1;
  // margin: 0;
  // left: 0;
  // top: 0;
  // position: fixed;
}

.container {
  background-color: $bg1;
}

.menu {
  background-color: $bg2;
}

.icp {
  text-decoration: none
}

.icp:visited {
  color: $nonce;
}

.footer {
  color: $nonce;
  font-size: small;
}

.shadow {
  border-radius: 1px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
</style>>
